<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <ul id="wrapper"></ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $(document).ready(function () {
            function ajax(url, type, data) {
                return new Promise(function (res, rej) {
                    $.ajax({
                        url: 'http://api.fgdemoshow.cn' + url,
                        data,
                        type: type || 'GET',
                        xhrFields: {
                            withCredentials: true
                        },
                        success(data) {
                            res(data);
                        },
                        error(err) {
                            rej(err);
                        }
                    })
                })
            }
            var $Ul = $('#wrapper');
            ajax('/api/login', 'POST', {
                username: 'dafeige',
                password: 123456
            }).then(function (res) {
                if (res.status === 1) {
                    return ajax('/api/getIndent')
                } else {
                    alert(res.msg);
                }
            }).then(function (res) {
                if (res.status === 1) {
                    $.each(res.data, function (index, ele) {
                        var $ItemLi = $('<li class="item"></li>');
                        var $Img = $('<img class="item_img" src=' + ele.imgUrl + ' />');
                        var $Details = $(`<div class="item_details">
                      <p class="name"> ${ele.name} </p>
                      <p class="target_site">收货地址：${ele.targetSite}</p>
                      <p class="price"> <span>价格：</span> <span>${ele.price} x ${ele.num}</span></p>
                      <p class="time"> 下单时间：${ele.createdAt} </p>
                    </div>`);
                        var $Btn = $('<div class="logistics"> 查看物流 <p class="iconfont btn icon-xia"></p></div>');
                        $Btn.data('id', ele.ordersId);
                        var $LogWrapper = $('<div class="log_wrapper"></div>');
                        $Ul.append($ItemLi).append($LogWrapper);
                        $ItemLi.append($Img).append($Details).append($Btn);
                    });
                    var isShow = [];
                    $('.logistics').each(function (index, item) {
                        isShow[index] = false;
                        $(item).click(function () {
                            var id = $(item).data('id');
                            if (isShow[index]) {
                                $('.log_wrapper').eq(index).hide('slow');
                                $('.logistics').children().removeClass('icon-top').addClass('icon-xia');
                                $('.log_wrapper').eq(index).children().remove('.log_item');
                                isShow.forEach(function (item, j) {
                                    isShow[j] = false;
                                })
                            } else {
                                ajax('/api/getLogistics?id=' + id).then(function (res) {
                                    if (res.status === 1) {
                                        var data = JSON.parse(res.data.logistics);
                                        $.each(data, function (i, ele) {
                                            var $LogItem = $(`<div class="log_item">
                                  <div>${ele.time}</div>
                                  <img class="log_icon" src="./imgs/2.png" />
                                  <div>${ele.site}</div>
                                </div>`)
                                            $('.log_wrapper').eq(index).append($LogItem);
                                        });
                                        $('.log_wrapper').eq(index).show('slow');
                                        $('.log_wrapper').eq(index).siblings('.log_wrapper').hide('slow');
                                        $('.log_wrapper').eq(index).siblings('.log_wrapper').children().remove('.log_item');
                                        isShow.forEach(function (item, j) {
                                            if (index === j) {
                                                isShow[j] = true;
                                                $('.logistics').eq(j).children().removeClass('icon-xia').addClass('icon-top');
                                            } else {

                                                $('.logistics').children().eq(j).removeClass('icon-top').addClass('icon-xia');
                                                isShow[j] = false;
                                            }
                                        });
                                    } else {
                                        alert(res.msg);
                                    }
                                });
                            }
                        });
                    })
                } else {
                    alert(res.msg)
                }
            });

        });

    </script>
</body>

</html>